import React, { useEffect, useState } from 'react'
import Scroll from '../../baseUI/scroll'
import './Main.css'
import { connect } from 'react-redux'
import * as actionTypes from './store/actionCreators'
import ImgList from '../../components/main/imgList/ImgList'
import { useHistory } from 'react-router-dom'
import SearchInput from '../../components/searchInput/SearchInput'
import styled from 'styled-components'
import Title from '../../components/title/title.jsx'
import * as api from '@/api'
import { forceCheck } from 'react-lazyload'
import ListData from '../../components/main/listData/ListData.jsx'
import Swipers from '../../components/main/swiper/swiper.jsx'
import useFetchState from '../../common/useFetchState'



const Main = (props) => {
    // 状态
    const [text1, settext1] = useFetchState([])
    let [page, setPage] = useFetchState(1)
    // console.log(props, '2222222222222222222');
    const { maindata } = props
    console.log(maindata, 'maindata');
    const [showPopup, setShowPopup] = useFetchState("none")
    const [diaplay, setDisplay] = useFetchState(false)
    // action
    const history = useHistory()
    const { getMainDataDispatch } = props
    const { classify = [], rotationImg = [], menuBarData = {} } = maindata
    console.log(classify, 'classify');


    const fetchText1 = () => {
        api.reqlist(page)
            .then(res => {
                settext1([
                    ...text1,
                    ...res.data.data.text1
                ])
            })
    }
    useEffect(() => {
        if (!maindata.length) {
            getMainDataDispatch()
            console.log(maindata, 'maindata');
        }
        fetchText1()
    }, [])
    
    useEffect(() => {
        fetchText1()
    }, [page])


    const handleOnclick = () => {
        // popup 组件显示与否
        // console.log(showPopup,'2222222222222222222222');
        setShowPopup(!showPopup)
    }
    // 上拉加载更多
    const handlePullUp = () => {
        console.log('上拉加载更多');
        setPage(page + 1)

    }
    // 下拉刷新
    const handlePullDown = () => {
        console.log('下拉刷新');
    }

    const scrollTo = (x, y, time = 300) => {
        Scroll.scrollTo(0, 0, time);
    }




    return (
        <div className="main">
            <Title />


            <Scroll
                direction={"vertical"}
                refresh={false}
                onScroll={
                    (e) => {
                        forceCheck()
                        // console.log(e);
                        // console.log(e.y);
                        // if (e.y < -100) {
                        //     setDisplay(true)
                        // } else {
                        //     setDisplay(false)
                        // }
                    }
                    // forceCheck()

                }
                pullUp={handlePullUp}
                pullDown={handlePullDown} >
                <div className="main-padding" >
                    {/* <ImgList handleOnclick={handleOnclick} display={showPopup} /> */}
                    <SearchInput handleOnclick={() => { handleOnclick() }}
                        searchBoxHandleOnclick={() => history.push('/search')} />
                    {/* <Classify classify={classify} /> */}
                    <Swipers rotationImg={rotationImg} />
                    {/* <RotationChart rotationImg={rotationImg} /> */}
                    {/* <MenuBar menuBarData={menuBarData} /> */}
                    <ImgList />
                    {/* <HomeService /> */}
                    {/* <FramLayout /> */}
                    <ListData text1={text1} />
                    {/* <ListData list={list} /> */}
                </div>
                {/* <ListData /> */}
                {/* <BackTop visibilityHeight={300}>
                    <div className='style'>回到顶部</div>
                </BackTop> */}
            </Scroll>

        </div>
    )
}
const mapStateToPorps = (state) => {
    return {
        maindata: state.main.maindata
    }
}
const mapStateToDispatch = (dispatch) => {
    return {
        getMainDataDispatch() {
            dispatch(actionTypes.getMainData())
        }
    }
}

export default connect(mapStateToPorps, mapStateToDispatch)(Main)
